<template>
  <div class="app">
    <nav>
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink :to='{name:"wode"}' active-class="active">我的</RouterLink>
      <RouterLink to="/list" active-class="active">列表</RouterLink>
      <RouterLink to="/detail" active-class="active">细节</RouterLink>
    </nav>
    <div class="main">
      <router-view></router-view>
      
    </div>
  </div>
</template>

<script setup lang='ts' name='App'>
import { ref, reactive } from 'vue'
import { RouterLink } from 'vue-router'

</script>
<style lang='scss' scoped>
.app{
  text-align: center;
  a{
    text-decoration: none;
    color: #000;
  }
  .active{
    color: red;
  }
  nav{
    margin: 0 auto;
    width: 80%;
    height: 70px;
    background-color: gray;
    color: black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius:5px ;
  }
  .main{
    margin: 10px auto 0;
    width: calc(80% - 60px);
    height: 500px;
    padding: 20px 30px;
    background-color: gray;
    
  }
  .active{
    color: red;
  }
}
</style>